<template>
    <div>
        <NForm ref="formRef" :model="dataForm" label-placement="left" :label-width="150">
            <NSplit direction="horizontal">
                <template #1>
                    <div style="width: 50%;">
                        <NFormItem label="题目标题" path="title" :rule="{
                            required: true,
                            message: '请输入题目标题',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.title" clearable />
                        </NFormItem>
                        <NFormItem label="题目类型" path="type" :rule="{
                            required: true,
                            message: '请输入题目类型',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.type" clearable />
                        </NFormItem>
                        <NFormItem label="类型标签" path="tags" :rule="{
                            required: true,
                            message: '请输入类型标签',
                        }">
                            <NSelect v-model:value="dataForm.tags" multiple :options="tagOptions" clearable />
                        </NFormItem>
                        <NFormItem label="难度" path="level" :rule="{
                            required: true,
                            message: '请输入难度',
                        }">
                            <NSelect v-model:value="dataForm.level" :options="levelOptions" clearable />
                        </NFormItem>
                        <NFormItem label="题目数据范围" path="dataRange" :rule="{
                            required: true,
                            message: '请输入题目数据范围',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.dataRange" clearable />
                        </NFormItem>
                        <NFormItem label="时间限制" path="timeLimit" :rule="{
                            required: true,
                            message: '请输入时间限制',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.timeLimit" clearable />
                        </NFormItem>
                        <NFormItem label="栈限制" path="stackLimit" :rule="{
                            required: true,
                            message: '请输入栈限制',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.stackLimit" clearable />
                        </NFormItem>
                        <NFormItem label="空间限制" path="memoryLimit" :rule="{
                            required: true,
                            message: '请输入空间限制',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.memoryLimit" clearable />
                        </NFormItem>
                        <NFormItem label="内容描述" path="contentDesc" :rule="{
                            required: true,
                            message: '请输入内容描述',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.contentDesc" clearable />
                        </NFormItem>
                        <NFormItem label="输入描述" path="inputDesc" :rule="{
                            required: true,
                            message: '请输入输入描述',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.inputDesc" clearable />
                        </NFormItem>
                        <NFormItem label="输出描述" path="outputDesc" :rule="{
                            required: true,
                            message: '请输入输出描述',
                            trigger: ['input', 'blur']
                        }">
                            <NInput v-model:value="dataForm.outputDesc" clearable />
                        </NFormItem>
                    </div>
                </template>
                <template #2>
                    <div style="width: 50%; margin-left: 24px;">
                        <NSpace align="center">
                            <h4>题面输入输出样例</h4>
                            <NButton size="small" @click="addExample">
                                增加
                            </NButton>
                        </NSpace>
                        <div v-for="(item, index) in dataForm.examples" :key="index"
                            style="margin-bottom: 24px; background-color: #f5f5f5; padding: 24px;">
                            <NFormItem :label-width="80" label="样例输入" :path="`examples[${index}].exampleInput`" :rule="{
                                required: true,
                                message: '请输入样例输入',
                                trigger: ['input', 'blur']
                            }">
                                <NInput v-model:value="item.exampleInput" clearable />
                            </NFormItem>
                            <NFormItem :label-width="80" label="样例输出" :path="`examples[${index}].exampleOutput`" :rule="{
                                required: true,
                                message: '请输入样例输出',
                                trigger: ['input', 'blur']
                            }">
                                <NInput v-model:value="item.exampleOutput" clearable />
                            </NFormItem>
                            <NFormItem :label-width="80" label="样例解释" :path="`examples[${index}].exampleExplain`" :rule="{
                                required: true,
                                message: '请输入样例解释',
                                trigger: ['input', 'blur']
                            }">
                                <NInput v-model:value="item.exampleExplain" clearable />
                            </NFormItem>
                            <NButton style="margin-left: 50%;" :disabled="dataForm.examples.length <= 1"
                                @click="removeExample(index)">
                                删除
                            </NButton>
                        </div>
                        <NSpace align="center">
                            <h4>编译模板</h4>
                            <NButton size="small" @click="addTemplate">
                                增加
                            </NButton>
                        </NSpace>
                        <div v-for="(item, index) in dataForm.templates" :key="index"
                            style="margin-bottom: 24px; background-color: #f5f5f5; padding: 24px;">
                            <NFormItem label="代码语言" :path="`templates[${index}].language`" :rule="{
                                required: true,
                                message: '请输入代码语言',
                                trigger: ['input', 'blur']
                            }">
                                <NSelect v-model:value="item.language" :options="lanOptions" clearable />
                            </NFormItem>
                            <NFormItem label="题目默认带出的模板" :path="`templates[${index}].userCodeDefine`" :rule="{
                                required: true,
                                message: '请输入题目默认带出的模板',
                                trigger: ['input', 'blur']
                            }">
                                <NInput v-model:value="item.userCodeDefine" clearable />
                            </NFormItem>
                            <NFormItem label="题目编译填充的模板" :path="`templates[${index}].inputInvoke`" :rule="{
                                required: true,
                                message: '请输入题目编译填充的模板',
                                trigger: ['input', 'blur']
                            }">
                                <NInput v-model:value="item.inputInvoke" clearable />
                            </NFormItem>
                            <NButton style="margin-left: 50%;" :disabled="dataForm.templates.length <= 1"
                                @click="removeTemplate(index)">
                                删除
                            </NButton>
                        </div>
                        <NFormItem style="float: right; margin-top: 24px;">
                            <NButton type="primary" @click="saveBasicForm">
                                保存
                            </NButton>
                            <NButton type="primary" @click="next">
                                下一步
                            </NButton>
                        </NFormItem>
                    </div>
                </template>
            </NSplit>
        </NForm>
    </div>
</template>

<script setup lang="ts">
import { FormInst } from 'naive-ui'
import { reactive, ref } from 'vue'
import { problemApi } from "@/api";
const message = window["$message"];

const emit = defineEmits(["next"]);

const formRef = ref<FormInst | null>(null);
const dataForm = reactive({
    title: '',
    type: '',
    tags: [],
    level: null,
    dataRange: '',
    timeLimit: '',
    stackLimit: '',
    memoryLimit: '',
    contentDesc: '',
    inputDesc: '',
    outputDesc: '',
    examples: [{ exampleInput: '', exampleOutput: '', exampleExplain: "" }],
    templates: [{ language: null, userCodeDefine: '', inputInvoke: '' }],
});

const tagOptions = [
    {
        label: '计算机基础',
        value: 1,
    },
    {
        label: '编程',
        value: 2,
    },
    {
        label: '算法',
        value: 3,
    }
];

const levelOptions = [
    {
        label: '简单',
        value: 1,
    },
    {
        label: '中等',
        value: 2,
    },
    {
        label: '困难',
        value: 3,
    }];

const lanOptions = [
    {
        label: 'JAVA',
        value: 'JAVA',
    },
]

const addExample = () => {
    dataForm.examples.push({ exampleInput: '', exampleOutput: '', exampleExplain: "" });
}

const removeExample = (index: number) => {
    dataForm.examples.splice(index, 1)
}

const addTemplate = () => {
    dataForm.templates.push({ language: null, userCodeDefine: '', inputInvoke: '' });
}

const removeTemplate = (index: number) => {
    dataForm.templates.splice(index, 1)
}

const saveBasicForm = () => {
    return new Promise((resolve) => {
        formRef.value?.validate((errors) => {
            if (!errors) {
                problemApi.addBasic(dataForm).then((res) => {
                    if (res.code === 200) {
                        resolve(true);
                        message && message.success("保存成功");
                    }
                })
            }
        })
    });

}

const next = () => {
    saveBasicForm().then((res) => {
        if (res) {
            emit("next");
        }
    });
};
</script>

<style scoped lang="less"></style>